<template>
	<div class="All" v-loading="loading">
		<div class="head">
			<div class="headIN">
				<!-- <div class="Img">
				</div> -->
				<div class="dropdown-menu">
					<el-dropdown class="dropdownMenu" @command="BackLogincommand">
						<div class="Menus">
							<img alt="" :src="InfoMation.heard" />
							<span class="el-dropdown-link" style="color: #fff">
								{{ InfoMation.name
                }}<i class="el-icon-arrow-down el-icon--right"></i>
							</span>
						</div>

						<el-dropdown-menu :split-button="true" slot="dropdown">
							<el-dropdown-item command="a">进入空间</el-dropdown-item>
							<el-dropdown-item command="b">退出登录</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</div>
			</div>
		</div>
		<div class="body">
			<div class="AllLeft">
				<!-- 头像 -->
				<div class="AllLeft-img">
					<img :src="InfoMation.heard" />
					<span>{{ InfoMation.name }}</span>
					<el-button round type="danger" @click="BackLogin">退出登录</el-button>
				</div>

				<!-- 侧边栏 -->
				<div class="NavMenu">
					<!-- disabled：不可选取状态 -->
					<el-menu class="el-menu-vertical-demo" default-active="1" @select="handleSelect">
						<el-menu-item index="1">
							<i class="el-icon-menu"></i>
							<span>我的课程</span>
						</el-menu-item>
						<el-menu-item index="2">
							<i class="el-icon-menu"></i>
							<span>基本资料</span>
						</el-menu-item>
						<el-menu-item index="3">
							<i class="el-icon-menu"></i>
							<span>密码管理</span>
						</el-menu-item>
						<el-menu-item index="4">
							<i class="el-icon-menu"></i>
							<span>成绩查询</span>
						</el-menu-item>
						<el-menu-item index="5">
							<i class="el-icon-menu"></i>
							<span>在线问题反馈</span>
						</el-menu-item>
					</el-menu>
				</div>

				<!-- 管理应用 -->
				<div class="Manage">
					<span>扫码体验移动端</span>
				</div>

				<div class="QR_code">
					<img src="../../assets/Snipaste_2022-01-06_10-36-38.png" />
				</div>

				<!-- 悬浮按钮 -->
				<div class="SusButten" v-if="susBtn == true">
					<div class="" @click="openDialog(1)">
						<!--            :value="12"-->
						<el-badge class="item">
							<i class="el-icon-warning"></i>
							<span>更新公告</span>
						</el-badge>
					</div>

					<div class="" style="margin: 20px 0" @click="openDialog(2)">
						<el-badge class="item">
							<i class="el-icon-warning"></i>
							<span>使用帮助</span>
						</el-badge>
					</div>
					<div class="" @click="openDialog(3)">
						<el-badge class="item">
							<i class="el-icon-warning"></i>
							<span>消息通知</span>
						</el-badge>
					</div>
					<div class="" style="margin-top: 20px">
						<el-backtop :bottom="240" target=""> </el-backtop>
					</div>
				</div>
			</div>
			<div class="AllRight">
				<router-view></router-view>
			</div>
		</div>

		<!-- 弹出层 -->
		<div class="">
			<el-dialog :visible.sync="dialogVisible" :title="dialogTit" width="30%">
				<div>
					<el-collapse v-model="activeName" accordion v-loading="collapseloading">
						<el-collapse-item :title="item.title" :name="index" v-for="(item, index) in Content"
							:key="index">
							<div v-html="richTextFormat(diaLogCentent)">
							</div>
						</el-collapse-item>
					</el-collapse>
				</div>
			</el-dialog>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				key: 1, //悬浮按钮key值
				collapseloading: true,
				loading: true,
				Content: [],
				diaLogCentent: "",
				InfoMation: [],
				dialogTit: "",
				activeName: "0",
				susBtn: true,
				dialogVisible: false,
				Tindex: 1,
				muneItem: [{
						icon: "el-icon-menu",
						name: "我的课程",
					},
					{
						icon: "el-icon-menu",
						name: "基本资料",
					},
					{
						icon: "el-icon-menu",
						name: "密码管理",
					},
					{
						icon: "el-icon-menu",
						name: "成绩查询",
					},
					{
						icon: "el-icon-menu",
						name: "在线问题反馈",
					},
				],
			};
		},
		methods: {

			//富文本过滤
			richTextFormat(value = '', len = 32) {
				// value = value.replace(/<\[^>]*>/g,'')
				value = value.replace(/<\.+?>/g, '');
				value = value.replace(/\s+/g, '');
				if (value.length > 30) {
					return value.slice(0, len) + "...";
				}
				return value;
			},
			//获取接口信息
			getInfo() {
				this.$axios
					.post("https://vvv.52ecode.cn/api/v1.RegisterUser/info", {
						jwt: JSON.parse(sessionStorage.getItem("IDInfo")),
					})
					.then((res) => {
						if (res.data.code == 200) {
							// console.log(res.data.data);
							this.InfoMation = res.data.data;
							sessionStorage.setItem(
								"InfoMation",
								JSON.stringify(this.InfoMation)
							);
							this.loading = false;
						}
					})
					.catch((err) => {
						console.log(err);
					});
			},

			/*
			 退出登录
			 */
			BackLogincommand(command) {
				if (command == "a") {
					this.$router.push("MyCourse");
				} else if (command == "b") {
					this.BackLogin();
				}
			},
			BackLogin() {
				this.$router.push("/");
			},

			// 打开提示框
			openDialog(index) {
				if (index == 1) {
					this.Tindex = 1;
					this.dialogTit = "更新公告";
					this.dialogVisible = true;

					this.$axios
						.post("https://vvv.52ecode.cn/api/v1.NoticeOther/index", {
							type: this.dialogTit,
							website_id: 1,
						})
						.then((res) => {
							console.log(res);
							this.Content = res.data.data;
							this.Content.forEach((iten, index) => {
								this.$axios.post('https://vvv.52ecode.cn/api/v1.NoticeOther/content', {
									id: iten.id,
									user_id: JSON.parse(sessionStorage.getItem('InfoMation')).id
								}).then(res => {
									this.diaLogCentent = res.data.data.content
								})
							})
							this.collapseloading = false;
						})
						.catch((err) => {
							console.log(err);
						});
				} else if (index == 2) {
					this.Tindex = 2;
					this.dialogTit = "使用帮助";
					this.dialogVisible = true;
					this.$axios
						.post("https://vvv.52ecode.cn/api/v1.NoticeOther/index", {
							type: this.dialogTit,
							website_id: 1,
						})
						.then((res) => {
							this.Content = res.data.data;
							this.Content.forEach((iten, index) => {
								this.$axios.post('https://vvv.52ecode.cn/api/v1.NoticeOther/content', {
									id: iten.id,
									user_id: JSON.parse(sessionStorage.getItem('InfoMation')).id
								}).then(res => {
									this.diaLogCentent = res.data.data.content
								})
							})
							this.collapseloading = false;
						})
						.catch((err) => {
							console.log(err);
						});
				} else if (index == 3) {
					this.Tindex = 3;
					this.dialogTit = "消息通知";
					this.dialogVisible = true;

					this.$axios
						.post("https://vvv.52ecode.cn/api/v1.NoticeOther/index", {
							type: this.dialogTit,
							website_id: 1,
						})
						.then((res) => {
							this.Content = res.data.data;
							this.Content.forEach((iten, index) => {
								this.$axios.post('https://vvv.52ecode.cn/api/v1.NoticeOther/content', {
									id: iten.id,
									user_id: JSON.parse(sessionStorage.getItem('InfoMation')).id
								}).then(res => {
									this.diaLogCentent = res.data.data.content
								})
							})
							this.collapseloading = false;
						})
						.catch((err) => {
							console.log(err);
						});
				}
			},

			openHome() {
				// 打开学生端首页
				this.$router.push("MyCourse");
			},

			handleSelect(key, keyPath) {
				// key:菜单项的index值（从1开始）
				// console.log(key, keyPath);
				if (key == 1) {
					this.$router.push("MyCourse");
					this.susBtn = true;
				} else if (key == 2) {
					this.$router.push("per_data");
					this.susBtn = true;
				} else if (key == 3) {
					this.$router.push("pwd_manage");
					this.susBtn = true;
				} else if (key == 4) {
					this.$router.push("inquire_grade");
					this.susBtn = true;
				} else if (key == 5) {
					this.$router.push("problem_feedback");
					this.susBtn = false;
				}
			},
		},
		created() {
			this.getInfo();
		},
	};
</script>

<style lang="scss" scoped>
	.All {
		.head {
			width: 100%;
			background-color: #4c4c4c;
			height: 40px;
			display: flex;
			align-items: center;
			justify-content: flex-end;

			.headIN {
				.dropdown-menu {
					margin-right: 40px;
					cursor: pointer;

					.dropdownMenu {
						.Menus {
							display: flex;
							align-items: center;
						}

						img {
							margin-right: 4px;
							border: 1px solid #000088;
							width: 22px;
							height: 22px;
							border-radius: 50%;
						}
					}
				}
			}
		}

		.body {
			display: flex;
			align-items: flex-start;
			justify-content: center;

			.AllLeft {
				.SusButten {
					position: fixed;
					bottom: 20px;
					right: 20px;
					display: flex;
					flex-direction: column;
					align-items: center;

					.item {
						border-radius: 50px;
						display: flex;
						align-items: center;
						justify-content: center;
						padding: 15px;
						box-shadow: 0 0 10px #c2d9f1;
						cursor: pointer;

						i {
							color: #3a8bff;
							margin-right: 5px;
						}

						span {
							color: #3a8bff;
						}
					}
				}

				.QR_code {
					display: flex;
					align-items: center;
					justify-content: center;
					margin-top: 20px;
				}

				.Manage {
					background-color: #f0f1f2;
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 15px 0;

					span {
						margin: 0 10px;
					}
				}

				.NavMenu {
					.el-menu-vertical-demo {
						background-color: #f9f9f9;
					}
				}

				.AllLeft-img {
					width: 220px;
					height: 180px;
					background-color: #faecdf;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					img {
						width: 80px;
						height: 80px;
						border-radius: 50%;
					}

					span {
						margin: 10px 0;
					}
				}
			}

			.AllRight {
				width: 980px;
			}
		}
	}
</style>
